<template>
  <div class="echarts" ref="echartTree" style="width: 910px;height: 910px"></div>
</template>

<script>
import {getCurrentInstance, reactive} from "vue";

export default {
  name: "echart_tree",
  setup(){
    const { proxy } = getCurrentInstance();
    const option = reactive({
      tooltip: {
        // trigger: 'item',
        // triggerOn: 'mousemove'
      },
      series: [
        {
          type: 'tree',
          data: [require('@/assets/data/all_samples.json')],
          top: '18%',
          bottom: '14%',
          layout: 'radial',
          symbol: 'emptyCircle',
          symbolSize: 7,
          initialTreeDepth: 3,
          animationDurationUpdate: 750,
          emphasis: {
            focus: 'descendant'
          }
        }
      ]
    })

    function rendeChart() {
      console.log('tree==>',option.series[0].data)
      const myeChart = proxy.$echarts.init(proxy.$refs.echartTree)
      myeChart.setOption(option)
    }
    setTimeout(() => {rendeChart()}, 1000)
  }
}
</script>

<style scoped>

</style>
